<template>
    <div class="siteSetTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                        class="lineTitle">站点设置</span></el-divider>
        </div>
        <div class="siteSetCard">
            <el-card class="box-card-left">
                <el-form :model="siteSet" status-icon :rules="rules" label-width="110px" ref="siteSet"
                         :label-position="labelPosition">

                    <el-form-item label="站点名称" prop="name">
                        <el-input id="name" class="inputLine" v-model="siteSet.name"></el-input>
                    </el-form-item>


                    <el-form-item label="SEO标题" prop="seoTitle">
                        <el-input id="seoTitle" class="inputLine" v-model="siteSet.seoTitle"></el-input>
                    </el-form-item>

                    <el-form-item label="SEO关联字" prop="seoKeyword">
                        <el-tag class="keyTags" id="seoKeyword"
                                :key="tag"
                                v-for="tag in seoKeyword"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="seoKey"
                                ref="saveKeyInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="keyTagsInput button-new-tag" size="small" @click="showInput">+ SEO关键字</el-button>
                    </el-form-item>


                    <el-form-item label="SEO描述" prop="seoDescription">
                        <el-input id="seoDescription" class="inputLine" v-model="siteSet.seoDescription"></el-input>
                    </el-form-item>

                    <el-form-item label="站点域名" prop="moduleContent">
                        <!--<el-input id="moduleContent" class="inputLine" v-model="module.moduleContent"></el-input>-->
                        <el-input id="content" class="inputLine" v-model="siteSet.domainName"></el-input>
                    </el-form-item>

                    <el-form-item label="模板路径" prop="videoTime">
                        <el-input id="" class="inputLine" v-model="siteSet.templateDir"></el-input>
                    </el-form-item>

                    <el-form-item label="站点开关" prop="isShow">
                        <el-switch id="isShow" class="inputLine"
                                   v-model="siteSet.isOpen"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-value="1"
                                   :inactive-value="0"
                        >
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="站点logo" prop="logo">
                        <big-file :upload-tile="'上传LOGO'" :input-id="'upload-icon'" :suffix-type="['jpg','jpeg','png','gif']"
                                  :uniId="siteSet.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_IUSE.key"
                                  :after-upload="afterUpload"></big-file>
                        <span class="logoDesc">建议尺寸：200*50px/600*150px(比例4:1)</span>
                        <el-row  class="upload-icon">
                            <el-col :span="2">
                                <el-image ref="linkLogo" :src="siteSet.logo"></el-image>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <!--这里save(formName)方法保存，ref别名的module-->
                        <el-button id="submitBtn" type="primary" @click="save('siteSet')">立即更新</el-button>
                        <el-button @click="resetForm('siteSet')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="box-card-right">
                <el-form :model="siteSet" status-icon :rules="rules" label-width="110px" ref="siteSetContact"
                         :label-position="labelPosition">

                    <el-form-item label="站点管理人" prop="contact">
                        <el-input id="contact" class="inputLine" v-model="siteSet.contact"></el-input>
                    </el-form-item>


                    <el-form-item label="固定座机" prop="phone">
                        <el-input id="phone" class="inputLine" v-model="siteSet.phone"></el-input>
                    </el-form-item>

                    <el-form-item label="移动电话" prop="mobile">
                        <el-input id="mobile" class="inputLine" v-model="siteSet.mobile"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <!--<el-input id="moduleContent" class="inputLine" v-model="module.moduleContent"></el-input>-->
                        <el-input id="email" class="inputLine" v-model="siteSet.email"></el-input>
                    </el-form-item>

                    <el-form-item label="公司地址" prop="address">
                        <el-input type="textarea" :rows="2" id="address" class="inputLine" v-model="siteSet.address"></el-input>
                    </el-form-item>

                    <el-form-item label="QQ" prop="qqNum">
                        <el-input id="qqNum" class="inputLine" v-model="siteSet.qqNum"></el-input>
                    </el-form-item>

                    <el-form-item label="微信" prop="wechatNum">
                        <el-input id="wechatNum" class="inputLine" v-model="siteSet.wechatNum"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <!--这里save(formName)方法保存，ref别名的module-->
                        <el-button id="submitBtnContact" type="primary" @click="save('siteSet')">立即更新</el-button>
                        <el-button @click="resetForm('siteSet')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </div>

    </div>
</template>

<script>
    import BigFile from "../../../components/BigFile";
    export default {
        name: "SiteSet",
        //引用组件
        components: {BigFile},
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }
                if (value === '') {

                    callback(new Error("名称不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("名称长度至少3位"));
                } else {
                    callback();
                }

            }
            let seoTitleValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("SEO标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("SEO标题长度至少3位"));
                } else {
                    callback();
                }
            }
            return {
                message: '这里是大模块-站点设置表内容页',
                siteSets: [],
                siteSet:{},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isOpen: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                labelPosition: 'right',
                //注意，这里如果校验失败，需要在{}对象中填入验证属性
                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    seoTitle: [
                        {validator: seoTitleValidate, trigger: 'blur'}
                    ],
                },
                //key
                seoKeyword: [],
                inputVisible: false,
                seoKey: '',
                //logo上传
                SOURCE_USE_TYPE:SOURCE_USE_TYPE,
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClose(tag) {
                this.seoKeyword.splice(this.seoKeyword.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveKeyInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let seoKey = this.seoKey;
                if (seoKey) {
                    this.seoKeyword.push(seoKey);
                }
                this.inputVisible = false;
                this.seoKey = '';
            },
            //1.list查询
            list() {
                Loadings.show();
                this.$axios.get(process.env.VUE_APP_SERVER + '/system/admin/siteSet/dtoList')
                    .then((response) => {
                        Loadings.hide();
                        let resp=response.data;
                        for(let i=0;i<resp.length;i++){
                            this.siteSet=resp[0];
                        }
                        this.seoKeyword=this.siteSet.seoKeyword;
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSet/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.siteSets = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },

            //更新显示show
            save(formName) {
                let responseMsg='';
                this.siteSet.seoKeyword=this.seoKeyword;
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$axios.post(process.env.VUE_APP_SERVER+'/system/admin/siteSet/save',this.siteSet)
                            .then((response)=>{
                                let resp=response.data;
                                responseMsg=response;

                                if(resp.success){
                                    this.list();
                                    //引入全局变量toast提示
                                    toast.success("保存成功","bottom-end");
                                }else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position:"top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position:"top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },
            //logo回显
            afterUpload(resp){
                if(resp.success){
                    this.siteSet.logo=resp.responseData.path;
                    //解决上传完毕不回显的问题
                    //this.$refs.linkLogo.src=this.siteLink.logo;
                }
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*卡片调整*/
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card-left {
        width: 49%;
        float: left;
        margin-right: 1%;
    }
    .box-card-right{
        float: right;
        width: 49%;
    }
    .siteSetCard{
        margin-top: 40px;
    }
    /*/deep/ .el-card__header{
        padding: 5px;
        color: #1d7dd6;
        text-align: left;
    }*/
    /*输入行控制*/
    .inputLine {
        max-width: 500px;
        float: left;
    }
    #isShow{

    }
    /deep/ .el-switch{
        line-height: 40px;
        display: block;
    }
    /deep/ .el-switch__core{
        width: 50px !important;
        height: 25px;
        border-radius: 10px;
        border: 2px solid #DCDFE6;
    }
    /deep/ .el-switch__core:after{
        width: 18px;
        height: 18px;

    }
    /*提示框的字符颜色*/
    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }
    /*关键字*/
    .keyTags{
        float: left;
        margin-right: 8px;
    }
    .keyTagsInput{
        float: left;
    }
    .input-new-tag{
        max-width: 230px;
        float: left;
    }
    /*logo建议尺寸*/
    .logoDesc{
        position: absolute;
        display: block;
        color: #1b6d85;
        top: 5px;
        left: 30%;
    }
    .upload-icon .el-image{
        position: absolute;
        margin-top: -40px;
        margin-left: -10px;
        padding: 5px;
        background: white;
        width: 50%;
    }
</style>